<template>
	<view class="address">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 列表 -->
		<view class="list clearfix" v-for="item in address" :key="item.index">
			<!-- <view class="fl">
				<view class="dot bg_5EBEFF"></view>
				<view>默认地址</view>
			</view> -->
			<view class="fr">
				<view class="name clearfix">
					{{item.contactsName}}
					<text class="delete fr" :data-id='item.id' @click="del_add">删除</text>
					<text class="edit fr" :data-id='item.id' @click="chang_add">编辑</text>
				</view>
				<view class="phone">{{item.contactsPhone}}</view>
				<view>{{item.province}}{{item.city}}{{item.region}}{{item.address}}</view>
			</view>
		</view>
		<!-- end -->

		<!-- 按钮 -->
		<navigator url="/pageageA/pages/address/add" class="add">添加新地址</navigator>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import ServiceList from '@/components/list/ServiceList.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		PublicHeader,
		ServiceList
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			title: '我的地址',
			address: []
		};
	},
	onLoad() {
		var _this = this;
		if (this.hasLogin) {
			_this.$http
				.get('/personal/center/getaddresslist/' + this.uerInfo.userId)
				.then(function(response) {
					_this.address = response.data;
				})
				.catch(function(error) {
					console.log(error);
				});
		}
	},
	methods: {
		del_add(e){
			console.log(e.target.dataset.id)
			var _this = this
			_this.$http
				.get('/personal/center/deleteuseraddress/' + e.target.dataset.id)
				.then(function(response) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '删除成功'
					});
					setTimeout(function() {
						uni.redirectTo({
							url: '/pageageA/pages/address/index'
						});
					}, 100);
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		chang_add(e){
			var _this = this
			console.log(e.target.dataset.id)
			uni.navigateTo({
				url:'/pageageA/pages/address/add?id='+e.target.dataset.id
			})
		}
	}
};
</script>

<style scoped lang="scss">
.list {
	min-height: 180rpx;
	padding: 20rpx 32rpx;
	border-bottom: 1rpx solid #dfdfdf;
	box-sizing: border-box;
}
.list .fl view {
	font-size: 22rpx;
	color: #999;
	line-height: 30rpx;
	width: 48rpx;
}
.list .fl .dot {
	width: 34rpx;
	height: 34rpx;
	border-radius: 100%;
	border: 1rpx solid #d6d6d6;
	margin-top: 16rpx;
	margin-bottom: 6rpx;
	margin-left: 4rpx;
}
.list .fr {
	width: 624rpx;
	font-size: 26rpx;
	color: #999999;
	line-height: 37rpx;
}
.list .fr .name {
	color: #333;
	font-size: 26rpx;
	margin-bottom: 6rpx;
}
.list .fr .name .fr {
	width: auto;
	margin-left: 58rpx;
}
.list .fr .name .edit {
	color: $uni-color1;
}
.list .fr .name .delete {
	color: #ff7272;
}
.list .fr .phone {
	color: #666;
	font-size: 26rpx;
	margin-bottom: 10rpx;
}
.bg_5EBEFF {
	background-color: #5ebeff;
	border: 0 none !important;
}
.add {
	width: 686rpx;
	height: 100rpx;
	text-align: center;
	color: #fff;
	line-height: 100rpx;
	border-radius: 10rpx;
	box-shadow: 0px 6px 20px 0px $uni-color1;
	background-color: $uni-color1;
	font-size: 36rpx;
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	margin-left: -343rpx;
}
</style>
